<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商家管理后台</title>
    <link rel="stylesheet" th:href="@{/css/layui/css/layui.css}"  />
    <link rel="stylesheet" th:href="@{/css/login.css}"  />
    <link rel="stylesheet" th:href="@{/css/layui/icon/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<body style="width: 100%">
<table class="table" id="getOrders">
    <thead>
    <tr>
        <th>序号</th>
        <th>订单编号</th>
        <th>商品中文名</th>
        <th>商品英文名</th>
        <th>商品日文名</th>
        <th>商品韩文名</th>
        <th>类型</th>
        <th>介绍</th>
        <th>订单数量</th>
        <th>价格</th>
        <th>订单时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-if="orders == null">
        <td rowspan="9"> 暂无数据 </td>
    </tr>
    <tr v-else-if="orders.length <= 0">
        <td rowspan="9"> 暂无数据 </td>
    </tr>
    <tr  v-else v-for="(o, index) in orders">
        <td>{{index + 1}}</td>
        <td>{{o.c_time}}</td>
        <td>{{o.g_name}}</td>
        <td>{{o.g_name_en}}</td>
        <td>{{o.g_name_jp}}</td>
        <td>{{o.g_name_ko}}</td>
        <td>{{o.t_name}}</td>
        <td>{{o.g_con}}</td>
        <td>{{o.t_num}}</td>
        <td>{{o.g_price}}</td>
        <td>{{o.o_time}}</td>
        <td><a class="btn btn-info" :href="'http://localhost:8080/printOrder?id='+o.id">打印</a></td>
    </tr>
    </tbody>
</table>

<script th:src="@{/js/jquery.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    var seaOrder = new Vue({
        el: "#getOrders",
        data: {
            orders: null
        },
        mounted() { //页面加载后执行
            var order = this;
            order.ordersInit();
        },
        methods:{
            ordersInit: function () {
                var order = this;
                $.ajax({
                    url: "/getOrders",
                    type: "POST",
                    data: JSON.stringify({"c_time": -1}),
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            order.orders = data.orders
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>